<template>
  <transition>
  <div class="app-financial-statements">
    <section class="app-main">
      {{searchBeginDate}}
      {{searchEndDate}}
      <mt-field label="选择月份" placeholder="请选择月份" type="text" v-model="allotDateStart" readonly="readonly" @click.native="openPicker('start')"></mt-field>
      <div class="button-content">
        <a download="" id="excelOut" type="primary" href="JavaScript:;" @click="outExcel">导出报表</a>
      </div>

      <mt-datetime-picker
        class="select-month"
        ref="picker"
        v-model="pickerValue"
        type="date"
        year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日"
        :startDate="startDate"
        :endDate="endDate"
        @confirm="handleDateChange">
      </mt-datetime-picker>
    </section>
  </div>
    </transition>
</template>

<script>
  import { Cell,Toast,DatetimePicker,Popup,Picker} from 'mint-ui';
//  Vue.component(Header.name, Header);
export default {
  components:{
    Cell,
  },
  data () {
    return {
      allotDateStart:'',
      searchBeginDate:'',
      searchEndDate:'',
      pickerValue:new Date('2018'),
      startDate:new Date('2018'),
      endDate:new Date(),
    }
  },
  mounted(){},
  methods:{
    outExcel(){

      var params = new URLSearchParams();
      params.append('beginDate',this.beginDate);
      params.append('endDate',this.endDate);
      this.$axios({
        method: 'post',
        url:'gp/declaration/exportDataExcel',
        data:params,
      }).then((res)=> {
        console.log(res,1111);
      if(res.data.statusCode==200){
        document.getElementById("excelOut").href ='';
      }else{
        this.$message({
          message:res.data.message,
          type: 'error',
          duration:1000
        });
      }

    });
    },
    openPicker(type) {
      if(type=='start'){
        this.isSelectStart=true
      }else if(type=='end'){
        this.isSelectStart=false;
      }
      this.$refs.picker.open();
    },

    handleDateChange(){
      const d = new Date(this.pickerValue);
      const year=d.getFullYear();
      var month='';
      var date='';
      if(d.getMonth()+1<=9){
        month='0'+(d.getMonth()+1)
      }else{
        month=d.getMonth()+1
      };
      if(d.getDate()+1<=9){
        date='0'+d.getDate()
      }else{
        date=d.getDate()
      };
      this.allotDateStart=year + '-' + month;
      this.searchBeginDate=year + '-' + month + '-01';
      this.searchEndDate=year + '-' + month+ '-' +new Date(year,month,0).getDate();
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>

  .app-financial-statements .app-main{
    padding:12px 0 0;
  }
  .app-financial-statements .app-main .staff-details{
    margin:0 0 12px;
  }
  .app-financial-statements .select-month .picker-slot{
    width: 50%;
    min-width:50%;
    max-width:50%;
  }
  .app-financial-statements .select-month .picker-items{
    justify-content:left
  }
  .app-financial-statements .button-content{
    padding:24px;
  }
  .app-financial-statements .button-content .mint-button{
    display: block;
    width: 100%;
  }
  #excelOut{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 4px;
    border: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    display: block;
    font-size: 18px;
    padding:8px;
    outline: 0;
    overflow: hidden;
    position: relative;
    text-align: center;
    color: #fff;
    background-color: #ef4f4f;
  }
</style>
